<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仙门弟子管理系统</title>
    <style>
        :root {
            --primary: #8B4513;
            --primary-light: #A0522D;
            --secondary: #D2B48C;
            --accent: #CD853F;
            --background: #F5F5DC;
            --text: #2C1E0E;
            --text-light: #5D4037;
            --border: #8B4513;
            --success: #2E7D32;
            --danger: #C62828;
            --scroll-bg: #DEB887;
            --scroll-thumb: #8B4513;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "SimSun", "STSong", serif;
            background-color: var(--background);
            background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="%23F5F5DC"/><path d="M0,20 L100,20 M0,40 L100,40 M0,60 L100,60 M0,80 L100,80" stroke="%23DEB887" stroke-width="0.5" stroke-dasharray="2,2"/></svg>');
            color: var(--text);
            line-height: 1.6;
        }

        /* 卷轴效果容器 */
        .scroll-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: rgba(245, 245, 220, 0.9);
            border: 1px solid var(--border);
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .scroll-container::before,
        .scroll-container::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50px;
            background-color: var(--secondary);
            opacity: 0.5;
            z-index: -1;
        }

        .scroll-container::before {
            left: 0;
            border-right: 1px solid var(--border);
        }

        .scroll-container::after {
            right: 0;
            border-left: 1px solid var(--border);
        }

        /* 标题样式 */
        header {
            text-align: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--primary);
            position: relative;
        }

        header::before,
        header::after {
            content: "❦";
            color: var(--accent);
            position: absolute;
            bottom: -10px;
        }

        header::before {
            left: 20%;
        }

        header::after {
            right: 20%;
        }

        h1 {
            font-size: 2.5rem;
            color: var(--primary);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            margin-bottom: 0.5rem;
        }

        .subtitle {
            font-size: 1.2rem;
            color: var(--text-light);
            font-style: italic;
        }

        /* 工具栏样式 */
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 0.8rem;
            background-color: rgba(210, 180, 140, 0.3);
            border-radius: 4px;
            border: 1px solid var(--secondary);
        }

        .search-box {
            display: flex;
            align-items: center;
        }

        .search-box input {
            padding: 0.5rem;
            border: 1px solid var(--border);
            border-radius: 4px 0 0 4px;
            background-color: rgba(255, 255, 255, 0.7);
            font-family: inherit;
            width: 250px;
        }

        .search-box button {
            padding: 0.5rem 1rem;
            background-color: var(--primary);
            color: white;
            border: 1px solid var(--border);
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-box button:hover {
            background-color: var(--primary-light);
        }

        .actions {
            display: flex;
            gap: 0.8rem;
        }

        /* 按钮样式 */
        .btn {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s;
            background-color: var(--secondary);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-success {
            background-color: var(--success);
            color: white;
            border-color: var(--success);
        }

        .btn-danger {
            background-color: var(--danger);
            color: white;
            border-color: var(--danger);
        }

        /* 表格样式 */
        .table-container {
            overflow-x: auto;
            border: 1px solid var(--border);
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.5);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 0.8rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--secondary);
        }

        th {
            background-color: var(--primary);
            color: white;
            font-weight: bold;
            position: sticky;
            top: 0;
        }

        tr:nth-child(even) {
            background-color: rgba(210, 180, 140, 0.1);
        }

        tr:hover {
            background-color: rgba(210, 180, 140, 0.3);
        }

        .rank {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            background-color: var(--accent);
            color: white;
            margin-right: 0.5rem;
        }

        .rank.top1 {
            background-color: #FFD700;
            color: var(--text);
        }

        .rank.top2 {
            background-color: #C0C0C0;
            color: var(--text);
        }

        .rank.top3 {
            background-color: #CD7F32;
        }

        .status {
            display: inline-block;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .status-active {
            background-color: rgba(46, 125, 50, 0.2);
            color: var(--success);
            border: 1px solid var(--success);
        }

        .status-inactive {
            background-color: rgba(198, 40, 40, 0.2);
            color: var(--danger);
            border: 1px solid var(--danger);
        }

        .status-meditation {
            background-color: rgba(33, 150, 243, 0.2);
            color: #1976D2;
            border: 1px solid #1976D2;
        }

        .operation-btn {
            padding: 0.3rem 0.6rem;
            font-size: 0.9rem;
            margin-right: 0.3rem;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 1.5rem;
            gap: 0.5rem;
        }

        .pagination button {
            padding: 0.3rem 0.8rem;
            background-color: var(--secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .pagination button:hover {
            background-color: var(--primary);
            color: white;
        }

        .pagination button.active {
            background-color: var(--primary);
            color: white;
            font-weight: bold;
        }

        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s linear 0.25s, opacity 0.25s;
        }

        .modal-overlay.active {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }

        .modal {
            background-color: var(--background);
            border: 2px solid var(--primary);
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            padding: 1.5rem;
            position: relative;
            transform: scale(0.9);
            transition: transform 0.25s;
			 width: 290px;
        }

        .modal-overlay.active .modal {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--secondary);
        }

        .modal-title {
            font-size: 1.5rem;
            color: var(--primary);
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.7);
            font-family: inherit;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        /* 图标样式 */
        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke-width: 0;
            stroke: currentColor;
            fill: currentColor;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: var(--scroll-bg);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: var(--scroll-thumb);
            border-radius: 10px;
            border: 3px solid var(--scroll-bg);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .scroll-container {
                margin: 1rem;
                padding: 1rem;
            }

            h1 {
                font-size: 2rem;
            }

            .toolbar {
                flex-direction: column;
                gap: 1rem;
            }

            .search-box, .actions {
                width: 100%;
            }

            .search-box input {
                width: 100%;
            }

            .actions {
                justify-content: center;
            }

            th, td {
                padding: 0.5rem;
                font-size: 0.9rem;
            }

            .operation-btn {
                padding: 0.2rem 0.4rem;
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <header>
            <h1>东方仙盟—仙门弟子管理名册</h1>
            <div class="subtitle">记录各弟子修行进度与宗门事务-未来之窗</div>
        </header>

        <div class="toolbar">
            <div class="search-box">
                <input type="text" placeholder="搜索弟子姓名、功法或境界...">
                <button class="btn">搜索</button>
            </div>
            <div class="actions">
                <button class="btn btn-primary" id="add-student-btn">
                    <span>添加弟子</span>
                </button>
                <button class="btn">
                    <span>批量操作</span>
                </button>
                <button class="btn">
                    <span>导出名册</span>
                </button>
            </div>
        </div>

        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>排名</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>入门时间</th>
                        <th>修为境界</th>
                        <th>主修功法</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="rank top1">1</span> 凌云</td>
                        <td>凌云</td>
                        <td>男</td>
                        <td>23</td>
                        <td>2020-03-15</td>
                        <td>金丹期</td>
                        <td>青云剑诀</td>
                        <td><span class="status status-active">在修</span></td>
                        <td>
                            <button class="btn operation-btn">查看</button>
                            <button class="btn operation-btn btn-primary">编辑</button>
                            <button class="btn operation-btn btn-danger">逐出</button>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="rank top2">2</span> 紫萱</td>
                        <td>紫萱</td>
                        <td>女</td>
                        <td>21</td>
                        <td>2021-01-20</td>
                        <td>筑基后期</td>
                        <td>紫霞心经</td>
                        <td><span class="status status-meditation">闭关</span></td>
                        <td>
                            <button class="btn operation-btn">查看</button>
                            <button class="btn operation-btn btn-primary">编辑</button>
                            <button class="btn operation-btn btn-danger">逐出</button>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="rank top3">3</span> 墨尘</td>
                        <td>墨尘</td>
                        <td>男</td>
                        <td>25</td>
                        <td>2019-11-05</td>
                        <td>筑基中期</td>
                        <td>玄水诀</td>
                        <td><span class="status status-active">在修</span></td>
                        <td>
                            <button class="btn operation-btn">查看</button>
                            <button class="btn operation-btn btn-primary">编辑</button>
                            <button class="btn operation-btn btn-danger">逐出</button>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="rank">4</span> 灵曦</td>
                        <td>灵曦</td>
                        <td>女</td>
                        <td>19</td>
                        <td>2021-09-12</td>
                        <td>炼气后期</td>
                        <td>长春功</td>
                        <td><span class="status status-active">在修</span></td>
                        <td>
                            <button class="btn operation-btn">查看</button>
                            <button class="btn operation-btn btn-primary">编辑</button>
                            <button class="btn operation-btn btn-danger">逐出</button>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="rank">5</span> 玄武</td>
                        <td>玄武</td>
                        <td>男</td>
                        <td>30</td>
                        <td>2018-05-28</td>
                        <td>筑基初期</td>
                        <td>大地神功</td>
                        <td><span class="status status-inactive">外出</span></td>
                        <td>
                            <button class="btn operation-btn">查看</button>
                            <button class="btn operation-btn btn-primary">编辑</button>
                            <button class="btn operation-btn btn-danger">逐出</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="pagination">
            <button>&lt;&lt;</button>
            <button>&lt;</button>
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <button>&gt;</button>
            <button>&gt;&gt;</button>
        </div>
    </div>

    <!-- 添加/编辑弟子模态框 -->
    <div class="modal-overlay" id="student-modal">
        <div class="modal">
            <div class="modal-header">
                <h2 class="modal-title">添加新弟子</h2>
                <button class="close-btn" id="close-modal">&times;</button>
            </div>
            <form id="student-form">
                <div class="form-group">
                    <label for="name" style="display: inline-block;">姓名</label>
                    <input type="text" id="name" required  style="width:175px;">
                </div>
                <div class="form-group">
                    <label for="gender" style="display: inline-block;">性别</label>
                    <select id="gender" required style="width:50px;">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                
                    <label for="age"  style="display: inline-block;">年龄</label>
                    <input type="number" id="age" min="5" max="150" required style="width:50px;">
                </div>
                <div class="form-group">
                    <label for="join-date" style="display: inline-block;">入门时间</label>
                    <input type="date" id="join-date" required  style="width:150px;">
                </div>
                <div class="form-group">
                    <label for="realm" style="display: inline-block;">修为境界</label>
                    <select id="realm" required  style="width:90px;">
                        <option value="炼气初期">炼气初期</option>
                        <option value="炼气中期">炼气中期</option>
                        <option value="炼气后期">炼气后期</option>
                        <option value="筑基初期">筑基初期</option>
                        <option value="筑基中期">筑基中期</option>
                        <option value="筑基后期">筑基后期</option>
                        <option value="金丹期">金丹期</option>
                        <option value="元婴期">元婴期</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="skill" style="display: inline-block;">主修功法</label>
                    <input type="text" id="skill" required  style="width:150px;">
                </div>
                <div class="form-group">
                    <label for="status" style="display: inline-block;">状态</label>
                    <select id="status" required  style="width:70px;">
                        <option value="在修">在修</option>
                        <option value="闭关">闭关</option>
                        <option value="外出">外出</option>
                        <option value="历练">历练</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" id="cancel-btn">取消</button>
                    <button type="submit" class="btn btn-success">确认</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const addStudentBtn = document.getElementById('add-student-btn');
        const studentModal = document.getElementById('student-modal');
        const closeModalBtn = document.getElementById('close-modal');
        const cancelBtn = document.getElementById('cancel-btn');
        const studentForm = document.getElementById('student-form');
        const paginationBtns = document.querySelectorAll('.pagination button');

        // 打开模态框
        addStudentBtn.addEventListener('click', () => {
            studentModal.classList.add('active');
            // 设置默认日期为今天
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('join-date').value = today;
        });

        // 关闭模态框
        function closeModal() {
            studentModal.classList.remove('active');
        }

        closeModalBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);

        // 点击模态框外部关闭
        studentModal.addEventListener('click', (e) => {
            if (e.target === studentModal) {
                closeModal();
            }
        });

        // 表单提交处理
        studentForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                gender: document.getElementById('gender').value,
                age: document.getElementById('age').value,
                joinDate: document.getElementById('join-date').value,
                realm: document.getElementById('realm').value,
                skill: document.getElementById('skill').value,
                status: document.getElementById('status').value
            };
            
            // 这里可以添加数据处理逻辑，如发送到服务器或更新表格
            console.log('新增弟子:', formData);
            
            // 关闭模态框并重置表单
            closeModal();
            studentForm.reset();
            
            // 显示成功提示（实际项目中可以用更友好的提示方式）
            alert('弟子添加成功！');
        });

        // 分页按钮点击事件
        paginationBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 移除所有按钮的active类
                paginationBtns.forEach(b => b.classList.remove('active'));
                // 给当前点击的按钮添加active类，除非是箭头按钮
                if (!btn.textContent.includes('<<') && !btn.textContent.includes('<') && 
                    !btn.textContent.includes('>>') && !btn.textContent.includes('>')) {
                    btn.classList.add('active');
                }
                // 这里可以添加分页逻辑
                console.log('切换到页码:', btn.textContent);
            });
        });

        // 模拟数据加载效果
        window.addEventListener('load', () => {
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 1s ease-in-out';
            
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 300);
        });
    </script>
</body>
</html>
